<!-- Created by duwanfu on 2018/11/2 -->
<template>
  <div :style="{height:height + 'rem'}"
       class="rollScreen_container">
    <ul class="rollScreen_list"
        :style = {transform:transform}
        :class="{rollScreen_list_unanim:num===0}">
      <li
        class="rollScreen_once"
        v-for="(item,index) in contentArr"
        :key=index
        :style="{height:height+'rem'}">
        {{item}}
      </li>
      <li class="rollScreen_once"
          v-for="(item,index) in contentArr"
          :key=index+contentArr.length
          :style="{height:height+'rem'}">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "notice-carousel",
    props: {
      height: {
        default: .88,
        type: Number
      },
      contentArr: {
        default: ()=> {
          return []
        },
        type: Array
      }
    },
    data() {
      return {
        num: 0
      }
    },
    computed: {
      transform: function () {
        return 'translateY(-' + this.num * this.height + 'rem)'
      }
    },
    created() {
      setInterval(() => {
        if (this.num !== this.contentArr.length) {
          this.num++
        } else {
          this.num = 0
        }
      }, 3000)
    }
  }
</script>

<style lang="scss" scoped>
  .rollScreen_container{
    position:relative;
    height: .88rem;
    overflow: hidden;
    li {
      line-height: .88rem;
    }
    .rollScreen_list{
      transition: 1s linear;
    }
    .rollScreen_list_unanim{
      transition: none
    }
  }
</style>

